//created by JIAN HUA
Ext.define("MajorProjectSenchaTouch.view.FloorPlans.pinchZoom", {
    extend: 'Ext.Container',
    xtype: 'pinchzoomimage',
    alias: 'widget.pinchzoomimage',


    config: {
         src: '',
        height: 'n',
        width: 'n',
      
    },


    initImage: function(newImageSrc) {
        var height = this.getHeight() || this.element.getHeight(),
            width = this.getWidth() || this.element.getWidth(),
            src = this.getSrc() || newImageSrc,
            image = null;


        if (Ext.isString(src) && src !== '') {
            image = Ext.create('Ext.Img', {
                // set mode auf empty to create a real image tag
                mode: '',
                height: height,
                width: width,
                src: src,
                listeners: {
                    pinch: {
                        element: 'element',
                        fn: this.onImagePinch




                    },
                    doubletap: {
                        element: 'element',
                        fn: this.onImageDoubletap
                    }
                }
            });




            this.add(image);
        }


        console.log('initImage');
    },


    onImagePinch: function(e) {
        var initialWidth  = this.getInitialConfig('width'),
            initialHeight = this.getInitialConfig('height'),
            newWidth      = initialWidth * e.scale,
            newHeight     = initialHeight * e.scale,
            container     = this,
            image         = this.element,
            scroller = this.up('container').getScrollable().getScroller(),
            pos = scroller.getMaxPosition();


        container.setWidth(newWidth);
        container.setHeight(newHeight);
        image.setWidth(newWidth);
        image.setHeight(newHeight);
        scroller.scrollTo(pos.x/2, pos.y/2);
    },


    onImageDoubletap: function(e) {
        var initialWidth  = this.getInitialConfig('width'),
            initialHeight = this.getInitialConfig('height'),
            container     = this,
            image         = this.element;








        container.setWidth(initialWidth);
        container.setHeight(initialHeight);
        image.setWidth(initialWidth);
        image.setHeight(initialHeight);


        Ext.Msg.alert('DoubleTap');
    },


    applySrc: function(newImageSrc) {


        var oldImage = this.down('img');




        if (Ext.isObject(oldImage)) {
            oldImage.destroy();
        }




        this.initImage(newImageSrc);


        console.log('applySrc');
    }
	})